<template>
  <virtual-scroll
    ref="virtualScroll"
    :data="list"
    :item-size="80"
    key-prop="id"
    style="height: calc(100vh) -20px"
    @change="virtualList => (tableData = virtualList)"
  >
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      :row-key="getRowKey"
      style="width: 100%"
      :default-expand-all="false"
      @select="onSelect"
      @select-all="onSelectAll"
      @selection-change="handleSelectionChange"
    >
      <virtual-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.subTable"
            style="width: 100%"
            :row-key="getRowKey"
            @select="onSelect1"
            @select-all="onSelectAll1"
            @selection-change="handleSelectionChange1"
          >
            <virtual-column type="expand">
              <template slot-scope="props">
                <el-table :data="props.row.subTable" style="width: 100%">
                  <el-table-column label="" prop="" width="50px"></el-table-column>
                  <el-table-column label="商品 ID" prop="id"></el-table-column>
                  <el-table-column label="商品名称" prop="text"></el-table-column>
                  <el-table-column label="描述" prop="text2"></el-table-column>
                </el-table>
              </template>
            </virtual-column>
            <virtual-column
              width="50"
              type="selection"
              :selectable="getSelectable"
            ></virtual-column>
            <el-table-column label="商品 ID" prop="id"></el-table-column>
            <el-table-column label="商品名称" prop="text"></el-table-column>
            <el-table-column label="描述" prop="text2"></el-table-column>
            <VirtualColumn vfixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </VirtualColumn>
          </el-table>
        </template>
      </virtual-column>
      <virtual-column width="50" type="selection" :selectable="getSelectable"></virtual-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="text"></el-table-column>
      <el-table-column label="描述" prop="text2"></el-table-column>
      <VirtualColumn vfixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </VirtualColumn>
    </el-table>
  </virtual-scroll>
</template>

<script>
  import VirtualScroll, { VirtualColumn } from 'el-table-virtual-scroll';

  export default {
    components: {
      VirtualScroll,
      VirtualColumn,
    },
    data() {
      return {
        value: undefined,
        list: [],
        tableData: [],
        loading: false,
        multipleSelection: [],
        multipleSelection1: [],
      };
    },
    methods: {
      fetchData() {
        this.loading = true;
        this.list = [];
        setTimeout(() => {
          this.list = [];
          for (let i = 1; i < 2000; i++) {
            const text = this.getRandomContent();
            const text2 = this.getRandomContent();
            this.list.push({
              id: i,
              show: false,
              text,
              text2,
              subTable: [
                {
                  id: 2000 + i,
                  show: false,
                  text,
                  text2,
                  subTable: [
                    {
                      id: 5000 + i,
                      show: false,
                      text,
                      text2,
                    },
                  ],
                },
              ],
            });
          }
          this.loading = false;
        }, 1000);
      },
      getSelectable(row, idx) {
        return true;
      },
      handleSelectionChange(val) {
        console.log('multipleSelection', val);
        this.multipleSelection = val;
      },
      onSelect(selection, row, checked) {
        console.log('select:', selection, row, checked);
      },
      onSelectAll(selection, checked) {
        console.log('select-all:', selection, checked);
      },
      handleSelectionChange1(val) {
        console.log('multipleSelection1', val);
        this.multipleSelection1 = val;
      },
      onSelect1(selection, row, checked) {
        console.log('select:', selection, row, checked);
      },
      onSelectAll1(selection, checked) {
        console.log('select-all:', selection, checked);
      },
      getRowKey(row) {
        return row.id;
      },
      getRandomContent() {
        const content = [
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
          '君不见黄河之水天上来，奔流到海不复回。',
        ];
        const i = Math.floor(Math.random() * 10);
        return content[i];
      },
    },
    created() {
      this.fetchData();
    },
  };
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<style>
  .el-table__expanded-cell {
    padding: 0px 0px !important;
  }
</style>
